<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1 {
				width: 100px;
				height: 100px;
				background-color: greenyellow;
				transform: rotate(45deg);
			}
			
			.div2 {
				width: 100px;
				height: 100px;
				background-color: red;
				transform: translate(100px, 100px);
			}
			
			.div3 {
				width: 100px;
				height: 100px;
				background-color: red;
				transform: translate(100%, 100%);
				/* translate(x, y)
						如果只有x，则只平衡x轴
						如果只平移y轴，那只x就写0
						translateX(x)
						translateY(y)
				 */
			}
			
			.div4 {
				width: 100px;
				height: 100px;
				background-color: black;
				transform: scale(2, 2);
				/* 
					scale(x, y)
						x：宽度缩放比
						y：高度缩放比
				 */
			}
		</style>
	</head>
	<body>
		<div class="div1">
			这是旋转
		</div>
		
			<div class="div2">
				这是平移,具体数值
			</div>
		
			<div class="div3">
				这是平移，百分比。是以自身的width和height为基数
			</div>
			
			
					
			<div class="div4">
				这是缩放，
			</div>
			
			<!-- 
				实现完美居中
					1、translate
					2、margin负值，为自身宽高一半
			 -->
	</body>
</html>
